<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>Serverless Platform</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/templatemo-softy-pinko.css">
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        function fold_or_unfold(pod_name) {
            console.log(pod_name)
            const flag = document.getElementById(pod_name).children[0].className
            if (flag === "fas fa-chevron-down") {
                document.getElementById(pod_name).firstChild.data = "Fold Up "
                document.getElementById(pod_name).children[0].className = "fas fa-chevron-up"
                document.getElementById('pod_id' + pod_name).attributes[1].nodeValue = "display:block"
            } else {
                document.getElementById(pod_name).firstChild.data = "View More "
                document.getElementById(pod_name).children[0].className = "fas fa-chevron-down"
                document.getElementById('pod_id' + pod_name).attributes[1].nodeValue = "display:none"
            }
        }
    </script>

</head>

<body id="page-top">
<!-- Message From Customer-->

<div>

    <div class="info" style="width: 100%;text-align: center;margin-bottom: 10px">
        <h2 style="color: #8261ee;margin-bottom: 10px">Function Log</h2>
        <p style="color: #8261ee"><a class="badge badge-warning"
                                               style="color: white"> Function {{ function_name }}</a> has {{ pods_size }}
            instances(
            {% for pod_log in pods_log %}
                <a class="badge badge-success" style="color: white">{{ pod_log.pod_name }}</a>
            {% endfor %}
            ). The logs for this instances are shown below.</p>
    </div>

    {% for pod_log in pods_log %}
        <div class="col-xl-12 card">
            <div class="card-header py-4 bg-primary d-flex flex-row align-items-center justify-content-between">
                <div style="width: 100%;text-align: center">
                    <h6 class="font-weight-bold text-light" >Instance Name : {{ pod_log.pod_name }}</h6>
                </div>
            </div>
            <div style="padding: 20px">
                {% for pod in pod_log.pod_log|slice:"0:5" %}
                    <div class="customer-message align-items-center">
                        <a class="font-weight-bold" href="#">
                            <div class="text-truncate message-title">{{ pod.context }}
                            </div>
                            <div class="small text-gray-500 message-time font-weight-bold">{{ pod.time }}</div>
                        </a>
                    </div>
                {% endfor %}
                <div id='pod_id{{ pod_log.pod_name }}' style="display: none">
                    {% for pod in pod_log.pod_log|slice:"5:" %}
                        <div class="customer-message align-items-center">
                            <a class="font-weight-bold" href="#">
                                <div class="text-truncate message-title">{{ pod.context }}
                                </div>
                                <div class="small text-gray-500 message-time font-weight-bold">{{ pod.time }}</div>
                            </a>
                        </div>
                    {% endfor %}
                </div>

                <div class="card-footer text-center">
                    <a id='{{ pod_log.pod_name }}' class="m-0 small text-primary card-link" href="#"
                       onclick="fold_or_unfold(this.id)">View More <i
                            class="fas fa-chevron-down"></i></a>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>


<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="/static/js/ruang-admin.min.js"></script>
<script src="/static/vendor/chart.js/Chart.min.js"></script>
<script src="/static/js/demo/chart-area-demo.js"></script>
</body>

</html>